<template>
  <NuxtLayout name="user" menuActive="4">
    <div class="learn_records">
      <el-timeline>
        <el-timeline-item v-for="item in listData" :key="item.id" :timestamp="item.createTime" placement="top">
          <el-card>
            <h3>{{ item.course ? item.course.title : '-' }}</h3>
            <div class="learn_records_row"></div>
            <div class="learn_records_row">学习进度：<el-progress :text-inside="true" :stroke-width="16" :percentage="parseInt(item.progress * 100)" striped style="width: 200px;" /></div>
            <div class="learn_records_row">总学时：{{ item.course ? item.course.totalHours || '0' : '-' }}<span style="width: 100px;"></span>已完成学时：{{ item.finishedHours || 0 }}</div>
            <div class="learn_records_row">总时长：{{ item.course ? convertSecondsToHMS(item.course.totalDuration) : '-' }}<span style="width: 100px;"></span>已观看课程总时长：{{ convertSecondsToHMS(item.videoDuration) }}</div>
          </el-card>
          <br>
          <a :href="`/curriculum_details/${item.courseId}.html`" class="el-button el-button--primary el-button--small">查看课程详情</a>
        </el-timeline-item>
      </el-timeline>
      <el-empty v-show="listData.length < 1" />
      <div class="page_box" v-show="total >= listForm.pageSize">
        <el-pagination background layout="prev, pager, next, total" :total="total" :default-current-page="parseInt(listForm.pageNum)" :page-size="listForm.pageSize" @change="pageChangeFn" />
      </div>
    </div>
  </NuxtLayout>
</template>

<script setup>
import { getCourseRecordApi } from '~/server/api'
import { convertSecondsToHMS } from '~/utils/utils'
// TDK
const prevHost = useRequestHeaders()["x-forwarded-proto"];
const host = useRequestHeaders()["host"];
const fullPath = useRoute()["fullPath"];
useSeoMeta({
  title: "技考邦_学习记录",
  keywords: "技考邦,学习记录",
  description: "技考邦，学习记录。",
  ogTitle: "技考邦_学习记录",
  ogDescription: "技考邦，学习记录。",
  ogType: "article",
  ogUrl: `${prevHost}://${host}${fullPath}`,
});
// 获取列表
const listData = ref([])
const listForm = reactive({
  pageNum: useRoute().query.p || 1,
  pageSize: 10,
})
const total = ref(0)
async function getListFn() {
  let { data: listRes } = await useAsyncData(() => useServerRequest(getCourseRecordApi, {
    method: 'post',
    body: JSON.stringify(listForm)
  }))
  if (listRes.value && listRes.value.errno === 0 && listRes.value.result && listRes.value.result.list) {
    listData.value = listRes.value.result.list;
    total.value = listRes.value.result.total;
  }
}
getListFn()
// 分页
function pageChangeFn(val) {
  useRouter().push(`/userCenter/LearnRecords?p=${val}`)
}
// 监听
watchEffect(() => {
  // 分页
  if (useRoute().query.p) {
    listForm.pageNum = useRoute().query.p;
    getListFn()
  }
})
</script>

<style lang="less" scoped>
@import '~/assets/css/main.less';

h3 {
  margin: 0;
}

.learn_records {
  padding: 30px;

  &_row {
    display: flex;
    margin: 1em 0;
  }
}

.el-input {
  width: 300px;
  height: 36px;
  border: 1px solid #E5E5E5;
  border-radius: 5px;

  :deep(.el-input__wrapper) {
    box-shadow: none;
    background-color: #fff;
  }

  :deep(.el-input-group__append) {
    box-shadow: none;
    background-color: #fff;
  }
}

.item_box {
  width: 100%;
  padding: 20px;
  border: 1px solid #E5E5E5;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;

  >img {
    width: 290px;
    height: 200px;
    margin-right: 20px;
  }

  .right_box {
    width: 510px;
  }

  .title {
    font-size: 20px;
    font-weight: bold;
    width: 510px;
    height: 24px;
    .overText(510px);
  }

  .bref_box {
    width: 500px;
    height: 156px;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    // align-content: center;
    // background: pink;
    >li {
      width: 250px;
      height: 18px;
      font-size: 14px;

      >.el-rate {
        height: 18px;
      }
    }
  }
}

.page_box {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
}
</style>